<!--
> Muaz Khan     - github.com/muaz-khan 
> MIT License   - www.webrtc-experiment.com/licence
> Documentation - www.RTCMultiConnection.org
-->
<script>
    if(!location.hash.replace('#', '').length) {
        location.href = location.href.split('#')[0] + '#' + (Math.random() * 100).toString().replace('.', '');
        location.reload();
    }
</script>

<title>RTCMultiConnection and Room-Screenshots</title>
<style>
@import url(https://fonts.googleapis.com/css?family=Ubuntu:300);
body {
    font-family: "Ubuntu", "DejaVu Sans Mono", "Bitstream Vera Sans Mono", monospace;
    font-size: 1.2em;
    line-height: 1.5em;
    margin: 2em 10%;
}

#images img {
    -moz-transition: all 1s ease;
    -ms-transition: all 1s ease;
    -o-transition: all 1s ease;
    -webkit-transition: all 1s ease;
    border: 1px solid red;
    border-radius: 3px;
    margin: 0 4px;
    padding: 4px;
    transition: all 1s ease;
    vertical-align: top;
}

#images img:hover {
    background: rgb(240, 5, 5);
}

video {
    vertical-align: top;
    width: 15em;
}

pre {
    border-left: 2px solid red;
    margin-left: 2em;
    padding-left: 1em;
}

strong {
    border-bottom: 1px solid red;
    color: red;
    font-family: inherit;
    font-weight: normal;
    padding-bottom: 3px;
}
</style>

<script src="https://cdn.webrtc-experiment.com/socket.io.js"></script>
<script src="https://webrtc.github.io/adapter/adapter-latest.js"></script>
<script src="https://cdn.webrtc-experiment.com/CodecsHandler.js"></script>
<script src="https://cdn.webrtc-experiment.com/IceServersHandler.js"></script>
<script src="https://cdn.webrtc-experiment.com/RTCMultiConnection.js"></script>

<h1>Preview Screenshot of the room using <a href="http://www.RTCMultiConnection.org/docs/">RTCMultiConnection.js</a>
</h1>

<input type="text" placeholder="screenshot" id="screenshot" style="width: 50%;" title="Screenshot image URL">
<button id="setup-connection">Setup Peer Connection</button>
<hr />
<section id="images"></section>
<hr /> Posters, screenshots/snapshots (, or whatever else you want) can be passed as
<strong>extra data</strong>!
<pre>
    connection.<a href="http://www.RTCMultiConnection.org/docs/extra/">extra</a> = {
    <strong>screenshot</strong>: document.getElementById('screenshot').value }; connection.open();
</pre>
and "onNewSession":
<pre>
    connection.<a href="http://www.RTCMultiConnection.org/docs/onNewSession/">onNewSession</a> = function(session) { image.src = session.
    <strong>extra.screenshot</strong>; };
</pre>
<hr />
<script>
var images = [
    'https://cdn.webrtc-experiment.com/images/javascript.png',
    'https://cdn.webrtc-experiment.com/images/ajax-loader.gif'
];

var connection = new RTCMultiConnection();

// https://github.com/muaz-khan/WebRTC-Experiment/tree/master/socketio-over-nodejs
var SIGNALING_SERVER = 'https://socketio-over-nodejs2.herokuapp.com:443/';
connection.openSignalingChannel = function(config) {
    var channel = config.channel || connection.channel || 'default-namespace';
    var sender = Math.round(Math.random() * 9999999999) + 9999999999;

    io.connect(SIGNALING_SERVER).emit('new-channel', {
        channel: channel,
        sender: sender
    });

    var socket = io.connect(SIGNALING_SERVER + channel);
    socket.channel = channel;

    socket.on('connect', function() {
        if (config.callback) config.callback(socket);
    });

    socket.send = function(message) {
        socket.emit('message', {
            sender: sender,
            data: message
        });
    };

    socket.on('message', config.onmessage);
};

connection.sessionid = (Math.random() * 100000).toString().replace('.', '');
document.getElementById('screenshot').value = images[+connection.sessionid % 2 == 0 ? 0 : 1];
connection.session = {
    audio: true,
    video: true
};

var images = document.getElementById('images');
var sessions = {};
connection.onNewSession = function(session) {
    if (sessions[session.sessionid]) return;
    sessions[session.sessionid] = session;

    var image = new Image();
    image.src = session.extra.screenshot;
    var coords = '200px';
    image.style.width = coords;
    image.style.height = coords;
    images.appendChild(image);
    image.title = 'Click to join the room.';
    image.id = session.sessionid;
    image.onclick = function() {
        this.style.opacity = 0;
        session = sessions[this.id];
        if (session) connection.join(session);
        setTimeout(function() {
            images.innerHTML = '';
        }, 700);
    };
};

connection.onstream = function(e) {
    document.body.appendChild(e.mediaElement);
};

connection.onstreamended = function(e) {
    if (e.mediaElement.parentNode) e.mediaElement.parentNode.removeChild(e.mediaElement);
};

document.getElementById('setup-connection').onclick = function() {
    if (!document.getElementById('screenshot').value) return alert('You must enter URL of the snapshot.');
    this.disabled = true;
    connection.extra = {
        screenshot: document.getElementById('screenshot').value
    };
    connection.open();
};

connection.connect();
</script>